<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '能量记录',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部返回按钮 -->
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="22px"></wd-icon>
    </view>
    <!-- 顶部用户信息区域 -->
    <view class="header">
      <view class="user-info">
        <view class="user-info-left">
          <HeaderTip />
        </view>
      </view>
    </view>
    <view class="energy-record">
      <!-- 标题 -->
      <view class="title-container">能量记录</view>

      <!-- 记录列表容器 -->
      <view class="record-container">
        <!-- 表头 -->
        <view class="record-header">
          <view class="header-item">日期</view>
          <view class="header-item">场景</view>
          <view class="header-item headerRecord">记录</view>
        </view>

        <!-- 记录列表 -->
        <view class="record-list">
          <!-- 数据行 -->
          <view class="record-item" v-for="item in recordItems" :key="item.date">
            <view class="record-date">{{ item.date }}</view>
            <view class="record-scene">{{ item.scene }}</view>
            <view class="record-content">{{ item.content }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import HeaderTip from '@/components/Header/index.vue'
const recordItems = ref([
  { date: '08-08 16:00', scene: '轨道音乐', content: '消耗红能量棒-10' },
  { date: '08-08 17:00', scene: '轨道音乐', content: '获得红晶碎片+100' },
  { date: '08-08 17:00', scene: '兑换商店', content: '消耗红晶碎片-20' },
  { date: '08-08 17:00', scene: '兑换商店', content: '获得黄能量棒+4' },
  { date: '08-08 16:00', scene: '轨道音乐', content: '消耗红能量棒-10' },
  { date: '08-08 17:00', scene: '轨道音乐', content: '获得红晶碎片+100' },
  { date: '08-08 17:00', scene: '兑换商店', content: '消耗红晶碎片-20' },
  { date: '08-08 17:00', scene: '兑换商店', content: '获得黄能量棒+4' },
  { date: '08-08 16:00', scene: '轨道音乐', content: '消耗红能量棒-10' },
  { date: '08-08 17:00', scene: '轨道音乐', content: '获得红晶碎片+100' },
  { date: '08-08 17:00', scene: '兑换商店', content: '消耗红晶碎片-20' },
  { date: '08-08 17:00', scene: '兑换商店', content: '获得黄能量棒+4' },
  { date: '08-08 16:00', scene: '轨道音乐', content: '消耗红能量棒-10' },
  { date: '08-08 17:00', scene: '轨道音乐', content: '获得红晶碎片+100' },
  { date: '08-08 17:00', scene: '兑换商店', content: '消耗红晶碎片-20' },
  { date: '08-08 17:00', scene: '兑换商店', content: '获得黄能量棒+4' },
  { date: '08-08 16:00', scene: '轨道音乐', content: '消耗红能量棒-10' },
  { date: '08-08 17:00', scene: '轨道音乐', content: '获得红晶碎片+100' },
  { date: '08-08 17:00', scene: '兑换商店', content: '消耗红晶碎片-20' },
  { date: '08-08 17:00', scene: '兑换商店', content: '获得黄能量棒+4' },
  { date: '08-08 16:00', scene: '轨道音乐', content: '消耗红能量棒-10' },
  { date: '08-08 17:00', scene: '轨道音乐', content: '获得红晶碎片+100' },
  { date: '08-08 17:00', scene: '兑换商店', content: '消耗红晶碎片-20' },
  { date: '08-08 17:00', scene: '兑换商店', content: '获得黄能量棒+4' },
  { date: '08-08 16:00', scene: '轨道音乐', content: '消耗红能量棒-10' },
  { date: '08-08 17:00', scene: '轨道音乐', content: '获得红晶碎片+100' },
  { date: '08-08 17:00', scene: '兑换商店', content: '消耗红晶碎片-20' },
  { date: '08-08 17:00', scene: '兑换商店', content: '获得黄能量棒+4' },
])
// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;

  .header {
    padding: 20rpx 0;
    position: relative;
    z-index: 10;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
  }

  .energy-record {
    height: calc(100vh - 350rpx);
    background-image: url('/static/images/my/energyRecord/energyRecordBg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20rpx;
    border-radius: 20rpx;

    .title-container {
      width: 320rpx;
      height: 60rpx;
      border-radius: 0 0 10rpx 10rpx;
      background: #00ffff;
      margin-bottom: 20rpx;
      text-align: center;
      line-height: 60rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #0f51c1;
    }

    .record-container {
      width: 90%;
      padding: 20rpx;
      overflow: hidden;

      .record-header {
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx dashed #000;
        height: 60rpx;
        line-height: 60rpx;
        .header-item {
          flex: 0.3;
          text-align: center;
          font-size: 30rpx;
          font-weight: bold;
          color: #0f51c1;
        }
        .headerRecord {
          flex: 0.4;
        }
      }

      .record-list {
        width: 100%;
        max-height: calc(100vh - 500rpx);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10rpx;

        // 隐藏滚动条但保留滚动功能
        &::-webkit-scrollbar {
          display: none;
        }

        .record-item {
          display: flex;
          justify-content: space-between;
          padding: 20rpx 0;
          position: relative;
          border-bottom: 2rpx dashed #000;
          .record-date,
          .record-scene,
          .record-content {
            flex: 0.3;
            text-align: center;
            font-size: 26rpx;
            color: #000;
          }

          .record-content {
            color: #000;
            flex: 0.4;
          }
        }
      }
    }
  }
}
</style>
